<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>flex2</title>
</head>

<body>
    <!-- 第三个 -->
    <div class="wrapper3">
        <div class="box1">
            <header class="header">头部</header>
            <div class="body">
                <div class="left">aside</div>
                <div class="right">content</div>
            </div>
            <footer>
                <div class="box1">
                    <img src="./1.动画相关练习/Images/0.jpg" alt="">
                    首页
                </div>
                <div class="box1">
                    <img src="./1.动画相关练习/Images/0.jpg" alt="">
                    首页
                </div>
                <div class="box1">
                    <img src="./1.动画相关练习/Images/0.jpg" alt="">
                    首页
                </div>
                <div class="box1">
                    <img src="./1.动画相关练习/Images/0.jpg" alt="">
                    首页
                </div>
            </footer>
        </div>
    </div>
</body>
<style>
    * {
        margin: 0;
        padding: 0;
    }

    html,body{
        height: 100%;
    }

    /* 第三个 */
    .wrapper3 {
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: center;
    }

    .wrapper3 .box1 {
        display: flex;
        flex-direction: column;
        width: 100%;
        height: 100%;
    }

    .wrapper3 .box1 .header {
        width: 100%;
        height: 70px;
        background-color: aquamarine;
        display: flex;
        justify-content: center;
        align-items: center;
        color: white;
    }

    .wrapper3 .body {
        height: 100%;
        width: 100%;
        background-color: rgb(19, 151, 207);
        display: flex;
        justify-content: space-between;
    }

    .wrapper3 .body .left {
        width: 30%;
        height: 100%;
        background-color: rgb(51, 157, 13);
        display: flex;
        justify-content: center;
        align-items: center;
        color: white;
    }
    .wrapper3 .body .right {
        width: 70%;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        color: white;
    }

    .wrapper3 footer {
        width: 100%;
        position: fixed;
        bottom: 0;
        height: 70px;
        background-color: white;
        display: flex;
        justify-content: space-around;
    }
    .wrapper3 footer .box1{
        width:25%;
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        align-items: center;
    }

    img{
        height: 30px;
        width: 30px;
    }
</style>

</html>